<template >
<!-- 及联部门组件 -->
    <el-cascader
    :value="value"
    separator="-"
    :props="props"
    size="small"
    :options="treeData"
    @change="changeValue">
    </el-cascader>
</template>

<script>
import {getDepartment} from '@/api/department'
import {transListToTreeData,processDepartmentData} from '@/utils'
export default {
  created(){
    this.getDepartments()
  },
  // 注意：vue2中父子通信中,由于父组件是放在表单里，那么数据的双向绑定只能用v-model不能用其它名字，那么如果需要v-model实现组件之间双向绑定时，与其他一般情况下的父子通信不同，子组件的属性名必须为value，并且后续通知父组件用到的事件名必须为input，也就是子组件需要写this.$emit('input',...),而其它情况下的父子通信可以自定义
  props:{
    value:{
      type:[Number,String],//存储的是部门id
      default:null
    }
  },
  data(){
    return {
      //将转换完成的树形组织架构数据储存起来并赋值给级联组件的options
      treeData:[],
      // 添加级联组件的props属性，添加要存储和要展示的字段(属性值以获取组织架构数据接口文档为主)
      props:{
        label:'name',//展示字段--组织架构中的name
        value:'id',//存储字段--组织架构数据中的id
        expandTrigger: 'hover'//级联以鼠标经过的模式触发
      }

    }
  },
  methods:{
    // 获取组织架构数据
    async getDepartments(){
      this.loading=true
      const res=await getDepartment()
      /*由于前端渲染需要修改后端传过来的数据，所以需要对数据进行处理*/
      // 将res深拷贝一份，并赋值给resList
      //对返回的数据进行切片处理，并赋值
      const resList=processDepartmentData(res)
      // 将resList转换为树形结构数据,并赋值给数据属性depts，方便前端渲染
      this.treeData=transListToTreeData(resList,0)
  
      // console.log(this.treeData);
    },
    // 监听级联组件输入框变化值
    /*注意：*/
    // (1)此时选中输入框中是多少级联是多少，那么就会返回多少个对应的id
    // (组件内部已封装实现：父组件根据选中的级联，传入最后一个级联的id到子组件，然后子组件由于绑定了props，并且其中的value属性值为id，那么内部会自动寻找该传入的id的父级id一层一层寻找直到寻找完成，并且按选中的顺序以数组的形式返回)
    // 如果我们需要用这个id进行传参调用接口，那么需要取该数组的最后一个元素，也就是我们要传入的id，也就是父组件我们选中传入的那个id
    changeValue(list){
      console.log(list);
      // 取数组的最后一个元素,并通知修改父组件的值实现v-model的双向绑定
      if(list.length>0){
        this.$emit('input',list[list.length-1])
      }else{
        //如果长度为零说明没有数据此时将父组件值修改为空即可，也就是相当于最初的父组件传入的值的初始化了
        this.$emit('input',null)
      }

    }
  }
}
</script>
